import React from 'react';
import { Link } from 'react-router';
// import Carousel from 'antd/lib/carousel';
var Carousel = require('nuka-carousel');
import backGround from '../images/gradient_opacity80.png';

const Brandings = React.createClass( {
    mixins : [Carousel.ControllerMixin],
    
    render() {
        if (this.props.brandings === undefined || this.props.brandings.length <= 0) {
            return <div>Loading......</div>
        } else {
            var brandings = [];
            var _this = this;

            this.props.brandings.map(function (branding) {
                var brandingImage = "url(" + branding.FeaturedImage + ")";
                var backTitle = "url(" + backGround + ")";
                var linkTo = "article/" + branding.ID;
                brandings.push(
                    <Link to={linkTo} key={branding.ID}>
                        <div className="branding-image" style={{ backgroundImage: brandingImage }}>
                            <div className="branding-title" style={{ backgroundImage: backTitle, backgroundSize:"100% 100%",backgroundRepeat:"no-repeat",width:"100%" }}>
                                <div style={{position:"absolute",bottom:"40px",margin:"0rem 1rem",fontSize: "1.2rem"}}>{branding.Title}</div>
                                <div style={{position:"absolute",bottom:"20px",margin:"0rem 1rem",fontSize:"0.7rem"}}>{branding.PublishedDateString} &nbsp;&nbsp;关注:{branding.NumberOfLikes}</div>
                            </div>
                        </div>
                    </Link>
                )
            });
            
            var settings = {
                dots: true,
                autoplay: this.props.brandings.length <= 1 ? false : true,
                autoplayInterval: 2000,
                wrapAround: true,
                mode: 'banner',
                decorators: [ {
                    component: React.createClass({
                        render() {
                            var self = this;
                            var indexes = this.getIndexes(self.props.slideCount, self.props.slidesToScroll);
                            return (
                            <ul style={self.getListStyles()}>
                                {
                                indexes.map(function(index) {
                                    return (
                                    <li style={self.getListItemStyles()} key={index}>
                                        <button
                                        style={self.getButtonStyles(self.props.currentSlide === index)}
                                        onClick={self.props.goToSlide.bind(null, index)}>
                                        <i className="fa fa-minus" aria-hidden="true"></i>
                                        </button>
                                    </li>
                                    )
                                })
                                }
                            </ul>
                            )
                        },
                        getIndexes(count, inc) {
                            var arr = [];
                            for (var i = 0; i < count; i += inc) {
                            arr.push(i);
                            }
                            return arr;
                        },
                        getListStyles() {
                            return {
                            position: 'relative',
                            margin: 0,
                            top: 10,
                            padding: 0
                            }
                        },
                        getListItemStyles() {
                            return {
                            listStyleType: 'none',
                            display: 'inline-block'
                            }
                        },
                        getButtonStyles(active) {
                            return {
                            border: 0,
                            background: 'transparent',
                            color: 'black',
                            cursor: 'pointer',
                            padding: 10,
                            outline: 0,
                            fontSize: 24,
                            opacity: active ? 1 : 0.5
                            }
                        }
                        }),
                        position: 'BottomCenter'
                }]
            };

            return (
                <div>
                <Carousel {...settings}>
                    {brandings}
                </Carousel>
                </div>
            );
        }
    }
});

export default Brandings;